<template>
<div class="shopCart">
  <div class="content" style="height: 48px;">
    <div class="display-flex">
      <div class="cartIcon text-center" :class="{highlight:totalCount}">
        <i class="iconfont icon-icon-ShoppingCart-" :class="{highlight:totalCount}" @click="toggleShow"></i>
        <div class="cartNumber" v-if="totalCount">
          <span>{{totalCount}}</span>
        </div>
      </div>
      <div class="flex-1 content-r ">
        <h3 class="white" >￥{{totalPrice}}</h3>
        <span class="font-xss" style="color: rgba(255,255,255,0.4)">{{`另需配送费￥${info.deliveryPrice}元`}}</span>
      </div>
      <button class="hasCount" :class="{highlight:payClass}">{{payText}}</button>
    </div>
  </div>
  <transition name="move">
    <div class="shopCartBg" v-show="listShow" @click="toggleShow">
      <div class="shopCartItem" >
        <div class="clearShop display-flex jc-between ai-center">
          <span class="pl-4 pr-4 font-xm">购物车</span>
          <button class="green-1 p-3" @click="clearCart">清空</button>
        </div>
        <div class="foodItem" ref="foodListItem">
          <ul>
            <li v-for="(food,index) in cartFoods" :key="index">
              <div class="display-flex jc-between pb-2 ai-center">
                <span class="pl-4 font-xm ">{{food.name}}</span>
                <div class="pr-4 display-flex ai-center">
                  <span class="red-1 font-xm font-weight pr-3" style="margin-bottom: -1px;">￥{{food.price}}</span>
                  <CartControl :food="food"/>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </transition>

</div>
</template>

<script>
  import {mapState,mapGetters} from 'vuex'
  import {CREAR_CART} from '../../store/mutation-types'
  import BScroll from 'better-scroll'
  import CartControl from "../CartControl/CartControl";
  export default {
    name: "ShopCard",
    data(){
      return{
        isShow:false
      }
    },
    components:{
      CartControl
    },
    computed:{
      ...mapState({cartFoods:'cartFoods',info:'info'}) ,
      ...mapGetters({totalCount:'totalCount',totalPrice:'totalPrice'}),
      payClass(){
        const {totalPrice} = this
        const {minPrice} = this.info
        return totalPrice >= minPrice ? true : false
      },
      payText(){
        const {totalPrice} = this
        const {minPrice} = this.info
        if (totalPrice === 0){
          return `￥${minPrice}元起送`
        } else if(totalPrice < minPrice){
          return `还差${minPrice - totalPrice}元起送`
        } else {
          return '结算'
        }
      } ,
      listShow(){
        //如果总数量为0，直接不显示
        if (this.totalPrice === 0){
          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
          this.isShow = false
          return false
        }
        if (this.isShow){
          this.$nextTick(()=>{
            //实现BScroll的实例是一个单例
            if (!this.scroll){
              this.scroll = new BScroll(this.$refs.foodListItem,{
                click:true
              })
            }else{
              this.scroll.finishPullUp()
              this.scroll.refresh() //让滚动条刷新：重新统计内容高度
            }
            console.log(this.scroll)
          })
        }
        return this.isShow
      }
    } ,
    methods:{
      toggleShow(){
        if(this.totalCount > 0){
          this.isShow = !this.isShow
        }
      },
      clearCart(){
        this.$store.commit(CREAR_CART)
        console.log('ok')
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/common.css";
  .shopCart{

    .content{
      height: 48px;
      position: relative;
      z-index: 100;
      .cartIcon{
        position: absolute;
        top: -11px;
        left: 11px;
        width: 56px;
        height: 56px;
        background-color: #2b343c;
        border: 5px solid #141d27;
        border-radius: 50%;
        z-index: 99;
        &.highlight{
          background-color: #02a774;
        }
        .iconfont{
          color: #fff;
          font-size: 31px;
        }
      }
      .cartNumber{
        position: absolute;
        top: -7px;
        right: -7px;
        width: 24px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        border-radius: 16px;
        font-size: 9px;
        font-weight: 700;
        color: #fff;
        background: #f01414;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4)
      }
      .content-r{
        background-color: #141d27;
        height: 48px;
        padding-left: 20%;
        h3{
          margin-top: 3px;
          margin-bottom: -3px;
        }
      }
      .hasCount{
        width: 105px;
        height: 48px;
        text-align: center;
        color: #fffdef;
        font-weight: 700;
        background-color: #2b343c;
        &.highlight{
          background-color: #02a774;
        }
      }
    }
    .shopCartBg{
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      height: calc(100vh - 47px);
      background-color: rgba(7,17,27,0.6);
      backdrop-filter: blur(10px);
      z-index: 90;
      &.move-enter-active,&.move-leave-active{
        transition: height 0.5s;
      }
      &.move-enter,&.move-leave-to{
        height: 0;
      }
      .shopCartItem{
        position: absolute;
        bottom: 0;
        width: 100%;
        .clearShop{
          background: #f3f5f7;
          border-bottom: 1px solid rgba(7,17,27,0.1);
        }
        .foodItem{
          background-color: #fff;
          height: 200px;
          overflow: hidden;
        }
      }
    }
  }
</style>
